<template>
  <a-card :bordered="false">
    <h4 style="margin:30px 0">预警模型配置</h4>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="选择模型">
              <a-tree-select
                v-model="queryParam.warnModelId"
                show-line
                style="width: 100%"
                placeholder="请选择"
                :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
                :tree-data="treeData"
                tree-default-expand-all
              >
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="状态">
              <j-dict-select-tag v-model="queryParam.status" placeholder="请选择" dictCode="quartz_status" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">清除条件</a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd('新增预警配置')" type="primary" icon="plus">新增</a-button>
      <a-button @click="handleAllStart()">全部启用</a-button>
      <a-button @click="handleAllStart(false)">全部暂停</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <!-- 状态渲染模板 -->
        <span slot="status" slot-scope="status">
          <a-tag v-if="status == 0" color="green">已启动</a-tag>
          <a-tag v-if="status == -1" color="orange">已暂停</a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="resumeJob(record, true)" v-if="record.status == -1">启用</a>
          <a @click="resumeJob(record, false)" v-if="record.status == 0">暂停</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleEdit(record, '编辑预警配置')">编辑</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm :title="`确定要删除吗?`" @confirm="handleTableDel(record)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <CheckAndEditModel ref="modalForm" @ok="loadData()"></CheckAndEditModel>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import CheckAndEditModel from './CheckAndEditModel'
import columns from './indexColumns'
import { getAction, deleteAction } from '@/api/manage'

export default {
  name: 'sjzjgl',
  mixins: [JeecgListMixin],
  components: {
    CheckAndEditModel
  },
  data() {
    return {
      queryParam: {},
      superParam: {
        modelId: undefined
      },
      dataSource: [
        {
          dataSourceCode: '1',
          dataSourceName: '1',
          dataSourceIp: '1',
          dataSourceType: '1',
          createTime: '1',
          status: 0
        }
      ],
      // 表头
      columns: columns(this),
      treeData: [],
      url: {
        selectTree: '/dataModel/queryDataModelTemplate',
        list: '/warnConfig/queryWarnConfigInfo',
        start: '/warnConfig/warnStart',
        stop: '/warnConfig/warnStop',
        allStart: '/warnConfig/warnAllStart',
        allStop: '/warnConfig/warnAllStop',
        delete: '/warnConfig/remove'
      }
    }
  },
  created() {
    this.loadTree()
  },
  methods: {
    loadTree() {
      var that = this
      that.treeData = []
      getAction(this.url.selectTree).then(res => {
        if (res.success) {
          //部门全选后，再添加部门，选中数量增多
          this.treeData = this.getTree(res.result, '0')
          this.loading = false
        }
      })
    },
    getTree(treeData, pid) {
      let treeArr = []
      for (let i = 0; i < treeData.length; i++) {
        let node = treeData[i]
        if (node.pid == pid) {
          let newNode = {
            title: node.modelName,
            key: node.id,
            value: node.id,
            children: this.getTree(treeData, node.id)
          }
          treeArr.push(newNode)
        }
      }
      return treeArr
    },
    resumeJob: function(record, flag = false) {
      var that = this
      //恢复定时任务
      this.$confirm({
        title: `确认${flag ? '启动' : '暂停'}`,
        content: `是否${flag ? '启动' : '暂停'}选中任务?`,
        onOk: function() {
          getAction(flag ? that.url.start : that.url.stop, { id: record.id }).then(res => {
            if (res.success) {
              that.$message.success(res.message)
              that.loadData()
            } else {
              that.$message.warning(res.message)
            }
          })
        }
      })
    },
    handleAllStart(flag = true) {
      getAction(flag ? this.url.allStart : this.url.allStop).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleTableDel(record) {
      deleteAction(this.url.delete, { id: record.id }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>